<template>
  <div>
    <n-space justify="end">
      <n-button type="primary" @click="emitLoadAreaEvent">
        加载区域
      </n-button>
    </n-space>

    <n-card style="height: 550px;">
      <canvas
          ref="canvasRef"
          :width="imageWidth"
          :height="imageHeight"
      >
      </canvas>
    </n-card>

    <n-space style="margin-top:20px">
      <n-scrollbar x-scrollable style="max-height: 150px">
        <div style="white-space: nowrap;">
          <n-image
              v-for="pic in screenshotList"
              preview-disabled
              :lazy="true"
              :width="70"
              size="small"
              @click="loadImage(pic.userFileId)"
              :class="{ 'selected': pic == paintImagUrl }"
              style="margin-left: 10px;"
              :src=fileFunction.getViewFilePathByUserFileId(pic.userFileId)
          />
        </div>
      </n-scrollbar>
    </n-space>
  </div>

</template>

<script setup lang="ts">
import {defineEmits, onMounted, ref} from "vue";
import {videoController} from "@/api/controller/video/videoController.api"
import fileFunction from "@/libs/globalFunction/file";

const screenshotList = ref([])
const canvasRef = ref(null)
const ctx = ref(null)
const image = ref(null);
const fixedHeight = 500;
const cropRect = ref({
  x: 0,
  y: 0,
  width: 0,
  height: 0
})
const isDrawing = ref(false)
const paintImagUrl = ref('')

const props = defineProps({
  src: {
    type: String,
    default: ''
  },
  filePath: {
    type:String,
    default: ''
  }
})

const imageWidth = ref(0)
const imageHeight = ref(0)
const scaleFactor = ref(0)

onMounted(() => {
  if(props.src){
    loadImage(props.src)
  }else {
    // 读取前10个图片文件
    getScreenshot()
  }
})

const loadImage = (imageSrc:string) =>{
  console.log(imageSrc)
  paintImagUrl.value = imageSrc
  image.value = new Image()
  image.value.src = fileFunction.getViewFilePathByUserFileId(imageSrc)
  image.value.onload = () => {
    ctx.value = canvasRef.value.getContext('2d')
    imageWidth.value = image.value.width
    imageHeight.value = image.value.height // 画布高度
    drawImage()
    initCrop()
  }
}

const drawImage = () => {
  if (imageHeight.value > fixedHeight) {
    scaleFactor.value = fixedHeight / imageHeight.value;
    const newWidth = imageWidth.value * scaleFactor.value;
    const newHeight = fixedHeight;
    canvasRef.value.width = newWidth
    canvasRef.value.height = newHeight
    ctx.value.drawImage(image.value, 0, 0, newWidth, newHeight);
  }else {
    canvasRef.value.width = imageWidth.value
    canvasRef.value.height = imageHeight.value
    ctx.value.drawImage(image.value, 0, 0, imageWidth.value, imageHeight.value);
  }
}

const initCrop = () => {
  let startX, startY;
  canvasRef.value.addEventListener("mousedown", (e: any) => {
    startX = e.offsetX;
    startY = e.offsetY;
    isDrawing.value = true;
  });

  canvasRef.value.addEventListener("mouseup", (e: any) => {
    if (isDrawing.value) {
      isDrawing.value = false;
      let endX = e.offsetX;
      let endY = e.offsetY;
      if (scaleFactor.value) {
        endX = endX / scaleFactor.value
        endY = endY / scaleFactor.value
        startX = startX / scaleFactor.value
        startY = startY / scaleFactor.value
      }
      cropRect.value = {
        x: Math.min(startX, endX),
        y: Math.min(startY, endY),
        width: Math.abs(startX - endX),
        height: Math.abs(startY - endY),
      };
      console.log(cropRect.value)
    }
  });

  canvasRef.value.addEventListener("mousemove", (e: any) => {
    if (isDrawing.value) {
      ctx.value.clearRect(0, 0, canvasRef.value.width, canvasRef.value.height);
      drawImage()
      drawRect(startX, startY, e.offsetX - startX, e.offsetY - startY);
    }
  });
};


const drawRect = (x, y, width, height) => {
  ctx.value.strokeStyle = "red";
  ctx.value.lineWidth = 5;
  ctx.value.strokeRect(x, y, width, height);
};

const getScreenshot = async () => {
  const param = {
    userFileId: props.filePath
  }
  await videoController.getScreenshotList(param).then(res => {
    if (res.code === 200) {
      screenshotList.value = res.data.slice(0, 10)
    }
  })
}



const emit = defineEmits()
const emitLoadAreaEvent = () =>{
  emit('loadAreaEvent',cropRect.value)
}

</script>
